<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>绑定样式</title>
		<script src="../../JS/vue.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				margin: 20px 20px;
			}
			.basic {
				width: 300px;
				height: 50px;
				border: 1px solid black;
			}
			.happy {
				border: 3px solid red;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg, yellow, pink, orange, yellow);
			}
			.sad {
				border: 4px dashed rgb(2, 197, 2);
				background-color: skyblue;
			}
			.normal {
				background-color: #bfa;
			}
			.atguigu1 {
				background-color: yellowgreen;
			}
			.atguigu2 {
				font-size: 20px;
				text-shadow: 2px 2px 10px red;
			}
			.atguigu3 {
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 绑定calss样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定
            名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div>
			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，样式动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div>
			<!-- 绑定style样式 --对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div>
			<!-- 绑定style样式 --数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					name: '小莫',
					mood: 'normal',
					classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
					classObj: {
						atguigu1: false,
						atguigu2: false,
						atguigu3: true
					},
					styleObj: {
						fontSize: '20px',
						color: 'red',
						backgroundColor: 'orange'
					},
					styleArr: [
						{
							fontSize: '20px',
							color: 'blue'
						},
						{
							backgroundColor: 'gray'
						},
						{
							fontSize: '30px'
						}
					]
				},
				methods: {
					changeMood() {
						const arr = ['happy', 'sad', 'normal']
						const index = ~~(Math.random() * 3)
						this.mood = arr[index]
					}
				}
			})
		</script>
	</body>
</html>
